<template>
    <div class="login-wrap">
        <div class="ms-title">后台管理系统</div>
        <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <div class="input_label">姓名<span class="red">*</span></div>
                <el-form-item prop="realName" class="input_edit" >
                   <el-input v-model="ruleForm.realName" placeholder=""  ></el-input>
                </el-form-item>
                <div class="input_label">手机<span class="red">*</span></div>
                <el-form-item prop="phone" class="input_edit" >
                    <el-input v-model="ruleForm.phone" placeholder=""  ></el-input>
                </el-form-item>
                <div class="input_label">省市所在<span class="red">*</span></div>
                <el-form-item prop="email" class="input_edit" >
                    <el-select v-model="value" placeholder="请选择" @change="handleItemChange(value)">
                        <el-option
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                </el-form-item>
                <div class="input_label">市县编码<span class="red">*</span></div>
                <el-form-item prop="email" class="input_edit" >
                    <el-select v-model="value2" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                </el-form-item>
                <div class="input_label">详细地址<span class="red">*</span></div>
                <el-form-item prop="address" class="input_edit" >
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.address"></el-input>
                </el-form-item>
                <div class="input_label">身份证号&nbsp;</div>
                <el-form-item prop="cardNum" class="input_edit" >
                    <el-input v-model="ruleForm.cardNum" placeholder=""  ></el-input>
                </el-form-item>
                <div class="input_label">身份证正面照片&nbsp;</div>
                <el-form-item type="file" prop="icon" class="input_edit"  label="">
                            <el-col :span="18">
                                <div style="border:1px solid #bfcbd9;line-height:80px;color:#bfcbd9;height:80px;">
                                <input type="file" id="uimg1" accept="image/gif,image/jpeg,image/bmp,image/png" @change="setValue1(uploadImg('#uimg1','#icon1'))" style="position:absolute;left: 0px;right: 0px;top: 0px;opacity: 0;filter: Alpha(opacity=0);z-index: 2;height:80px;"/>
                                <div id="icon1">正面</div>
                                </div>
                                <el-input v-show="false" v-model="ruleForm.cardFrontImg"></el-input>
                            </el-col>
                        </el-form-item>
                <div class="input_label">身份证反面照片&nbsp;</div>
                <el-form-item type="file" prop="icon" class="input_edit"  label="">
                            <el-col :span="18">
                                <div style="border:1px solid #bfcbd9;line-height:80px;color:#bfcbd9;height:80px;">
                                <input type="file" id="uimg2" accept="image/gif,image/jpeg,image/bmp,image/png" @change="setValue2(uploadImg('#uimg2','#icon2'))" style="position:absolute;left: 0px;right: 0px;top: 0px;opacity: 0;filter: Alpha(opacity=0);z-index: 2;height:80px;"/>
                                <div id="icon2">反面</div>
                                </div>
                                <el-input v-show="false" v-model="ruleForm.cardBackImg"></el-input>
                            </el-col>
                        </el-form-item>
                <!-- <div class="input_label">地址&nbsp;</div>
                <el-form-item prop="shopaddress" class="input_edit" >
                    <el-input  placeholder="搜索地址" v-model="ruleForm.shopaddress" class="input_class">
                    </el-input>
                </el-form-item> -->
                <!-- <div id="mapcontainer" style="border:1px solid #f1f1f1;min-height: 350px">

                </div> -->
                <br>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">申请</el-button>
                </div>
                <p style="font-size:12px;line-height:30px;color:#999;">Tips : 用户名和密码随便填。</p>
            </el-form>
			<!-- <remote-js src="//webapi.amap.com/maps?v=1.3&amp;key=1a25480e49789bf3e479544af049601c&callback=window.initMap"></remote-js> -->
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
	//import  AMap from '//webapi.amap.com/maps?v=1.3&amp;key=1a25480e49789bf3e479544af049601c&callback=window.initMap'
	import { AMapManager } from 'vue-amap';
	let amapManager = new AMapManager();
	
	
    export default {
		components: {
		   'remote-js': {
			render(createElement) {
			  return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
			},
			props: {
			  src: { type: String, required: true },
			},
		  },
		 },
        data: function () {
            return {
                ruleForm: {
                    realName: '15623885110',
                    phone: '123456',
                    areaCode:'',
					          address:'',
                    cardNum:'',
                    cardFrontImg:'',
                    cardBackImg:'',
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
					code: [
                        {required: true, message: '请输入邮编', trigger: 'blur'}
                    ],
					area: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'}
                    ],
                },
                options2:[],
                options: [],
                    value: '',
                    value2:''
                  
            }
        },
        created(){
            this.getData();
        },
        methods: {
            submitForm(formName) {
                let self = this;
                self.ruleForm.areaCode=self.value2;
                self.ruleForm.verifyStatus=0;
                console.log(this.ruleForm);
                self.myajax("/apply/create",self.ruleForm,function(data){
                   console.log(data)
                   
                });
            },
            getData(){
                let self = this;
                self.myajax("/area/listByPid",{pid:null},function(data){
                   console.log(data)
                   var area=data.data;
                   console.log(area)
                   if(area!=null&&area.length>0){
                    self.options2=[];
                    for(var i=0;i<area.length;i++){
                        var oneArea={};
                        oneArea.label=area[i].name;
                        oneArea.value=area[i].id
                        self.options2.push(oneArea);
                    }
                   }
                   console.log(self.options2)
                });
                // this.$axios.post('/admin/area/getlist',null).then((res) => {
                //     self.tableData = res.data.data;
                // })
            },
            handleItemChange(val) {
                let self = this;
                console.log('active item:', val);
                if(val!=null&&val!=''){
                    self.myajax("/area/listByPid",{pid:val},function(data){
                       console.log(data)
                       var area=data.data;
                       console.log(area)
                       if(area!=null&&area.length>0){
                        self.options=[];
                        for(var i=0;i<area.length;i++){
                            var oneArea={};
                            oneArea.label=area[i].name;
                            oneArea.value=area[i].code
                            self.options.push(oneArea);
                        }
                       }
                       console.log(self.options)
                    });
                }
              },
            open() {
                this.$message('用户名或密码错误');
            },
            open2() {
                this.$message({
                    message: '网络服务器错误',
                    type: 'warning'
                });
            },
            open3() {
                this.$message({
                    message: '登录成功',
                    type: 'success'
                });
            },
            searchPosition(){
                this.$message('搜索');
            },
            setValue1(value){
                this.ruleForm.cardFrontImg="";
                if(value){
                    this.ruleForm.cardFrontImg=value;
                }
            },
            setValue2(value){
                this.ruleForm.cardBackImg="";
                if(value){
                    this.ruleForm.cardBackImg=value;
                }
            },

        }
    }

	var infowindow;
	var map;
	var marker;

  //   window.initMap=function(){
		
		
  //       console.log("in init...");
		
		// //给搜索做转换
		// $(".input_class").find("input").attr("id","input_id");
		
		
		
		
  //       map = new AMap.Map('mapcontainer', {
  //           resizeEnable: true,
  //           //center: [117.000923, 36.675807],
  //           animateEnable:true,
  //           zoom: 18		//显示大小
  //       });
  //       map.setFeatures(['road','point','building'])

  //       //给地图添加小点点
  //       marker = new AMap.Marker({
  //           icon : 'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px
  //           position :[117.000923, 36.675807],
  //           offset : new AMap.Pixel(-12,-12),
  //           draggable:true,
  //           map : map
  //       });

  //       marker.on('click',function(e){
  //           infowindow.open(map,e.target.getPosition());
  //           console.log(e);
  //       });

  //       marker.on("dragend",function(e){
  //           console.log(map,e.target.getPosition());
  //       });


  //       map.plugin(["AMap.ToolBar","AMap.Scale","AMap.Geolocation"], function() {
  //           map.addControl(new AMap.ToolBar());
  //           map.addControl(new AMap.Scale());//显示比例尺
  //           //map.addControl(new AMap.Geolocation());//显示我的位置

  //       });
  //       AMap.plugin('AMap.AdvancedInfoWindow',function(){
  //           infowindow = new AMap.AdvancedInfoWindow({
  //               content: '<div class="info-title">高德地图</div><div class="info-content">'+
  //               '<img src="http://webapi.amap.com/images/amap.jpg">'+
  //               '高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br/>'+
  //               '<a target="_blank" href = "http://mobile.amap.com/">点击下载高德地图</a></div>',
  //               offset: new AMap.Pixel(0, -30)
  //           });

  //       });
  //       //通过地图获得经纬度
  //       AMap.service('AMap.Geocoder',function(){//回调函数
  //           //实例化Geocoder
  //           var geocoder = new AMap.Geocoder({
  //               city: ""//城市，默认：“全国”
  //           });
            /*
             geocoder.getLocation("武汉市洪山区关山一路552号", function(status, result) {
             if (status === 'complete' && result.info === 'OK') {
             //TODO:获得了有效经纬度，可以做一些展示工作
             //比如在获得的经纬度上打上一个Marker
             //北纬N30°28′32.17″ 东经E114°24′19.76″
             console.log(result)
             console.log("北纬:"+result.geocodes[0].location.lat);
             console.log("东经:"+result.geocodes[0].location.lng);
             }else{
             //获取经纬度失败
             console.log('获取经纬度失败');
             }
             });
             */


        //     geolocation = new AMap.Geolocation({
        //         enableHighAccuracy: true,//是否使用高精度定位，默认:true
        //         timeout: 10000,          //超过10秒后停止定位，默认：无穷大
        //         buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        //         zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        //         buttonPosition:'RB'
        //     });
        //     map.addControl(geolocation);
        //     geolocation.getCurrentPosition();
        //     AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        //     AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息


        //     //解析定位结果
        //     function onComplete(data) {
        //         var str=['定位成功'];
        //         str.push('经度：' + data.position.getLng());
        //         str.push('纬度：' + data.position.getLat());

        //         console.log(data);
        //         console.log(data.addressComponent.city);
        //         autocomplete.setCity(data.addressComponent.city);

        //         marker.setPosition(data.position);

        //         if(data.accuracy){
        //             str.push('精度：' + data.accuracy + ' 米');
        //         }//如为IP精确定位结果则没有精度信息
        //         str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        //         //document.getElementById('tip').innerHTML = str.join('<br>');
        //     }
        //     //解析定位错误信息
        //     function onError(data) {
        //         alert( '定位失败');
        //     }

        // })

        //获得点击地图地址
        /*
         AMap.event.addListener(map, "click", function(e){
         console.log(e.lnglat.lat);
         console.log(e.lnglat.lng);

         var marker = new AMap.Marker({
         icon : 'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px
         position :e.lnglat,
         offset : new AMap.Pixel(-12,-12),
         draggable:true,
         map : map
         });
         marker.on('click',function(e){
         infowindow.open(map,e.target.getPosition());
         console.log(e);
         })

         });
         */
   //      AMap.event.addListener(map, "click", function(e){
   //          console.log(e.lnglat.lat);
   //          console.log(e.lnglat.lng);

   //          marker.setPosition(e.lnglat);
   //      });

   //      var autoOptions = {
   //          city: "", //城市，默认全国
   //          input:"input_id"//使用联想输入的input的id
   //      };
   //      autocomplete= new AMap.Autocomplete(autoOptions);

   //      AMap.event.addListener(autocomplete, "select", function(e){
   //          //TODO 针对选中的poi实现自己的功能
   //          // placeSearch.search(e.poi.name)
   //          //console.log(e.poi.location);
			// console.log("选中了");
   //          marker.setPosition(e.poi.location);
   //          map.setCenter(e.poi.location);
   //      });

   //  }
</script>


<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .ms-title {
        position: absolute;
        top: 30%;
        width: 100%;
        margin-top: -230px;
        text-align: center;
        font-size: 30px;
        color: #fff;

    }

    .ms-login {
        position: absolute;
        left: 50%;
        top: 30%;
        width: 350px;
        height: 600px;
        margin: -150px 0 0 -190px;
        padding: 40px;
        border-radius: 5px;
        background: #fff;
    }

    .login-btn {
        text-align: center;
    }

    .login-btn button {
        width: 100%;
        height: 36px;
    }

    .input_label{
        position: absolute;
        line-height: 36px
    }

    .input_edit{
        margin-left: 126px;
    }

    .red{
        color:red;
    }
</style>
